<template>
  <div class="projectinfo">
    <el-row>
      <el-button icon="el-icon-plus" @click="adddialogVisible = true"
        >添加</el-button
      >
      <!-- 打印 -->
      <el-button icon="el-icon-printer" @click="printSomething">打印</el-button>
      <el-button icon="el-icon-delete" @click="del">删除</el-button>
      <!-- <el-button icon="el-icon-delete" @click="changPage">刷新</el-button> -->
      <!-- 导出文档 -->
      <!-- <el-button icon="el-icon-download" @click="exportClick()" 
        >导出文档</el-button
      > -->
    </el-row>
    <div>
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :row-style="{ height: '48px' }"
        height="calc(100vh - 220px)"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column fixed="left" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="modify(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
        <el-table-column type="index" label="编号" width="50">
        </el-table-column>
        <el-table-column prop="township" label="乡镇" show-overflow-tooltip
        width="100" />
        <el-table-column prop="Village" label="村" show-overflow-tooltip width="100" />
        <el-table-column
          prop="ProjectName"
          label="用地项目名称"
          show-overflow-tooltip
        />
        <el-table-column prop="YearNum" label="年度" show-overflow-tooltip width="100" />
        <el-table-column
          prop="BatchNum"
          label="批次"
          show-overflow-tooltip
          width="60"
        />
        <el-table-column
          prop="BlockNum"
          label="地块"
          show-overflow-tooltip
          width="60"
        />
        <el-table-column
          prop="ApprovedDate"
          label="基准日期"
          show-overflow-tooltip
          ><template slot-scope="scope">{{
            formatDate(scope.row.ApprovedDate)
          }}</template></el-table-column
        >
        <el-table-column
          prop="InterestDate"
          label="计息日期"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{
            formatDate(scope.row.InterestDate)
          }}</template>
        </el-table-column>
        <el-table-column
          prop="Avgsocialwageyear"
          label="基准金额年度"
          show-overflow-tooltip
        />
        <el-table-column
          prop="Avgsocialwage"
          label="基准金额"
          show-overflow-tooltip
        />
        <el-table-column
          prop="ApprovedArea"
          label="用地面积（亩）"
          show-overflow-tooltip
        />
        <el-table-column
          prop="RegionPrice"
          label="区片价"
          show-overflow-tooltip
        />
        <el-table-column
          prop="LevyScale"
          label="征缴比例"
          show-overflow-tooltip
        />
        <el-table-column
          prop="SecurityAmount"
          label="社会保险费"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.SecurityAmount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="HouseholdCount"
          label="征地户数"
          show-overflow-tooltip
        />
        <el-table-column
          prop="FarmerCount"
          label="征地人数"
          show-overflow-tooltip
        />
      </el-table>
    </div>
    <!-- 修改模态框 -->
    <el-dialog title="修改" :visible.sync="dialogVisible" width="877px">
      <el-form
        :inline="true"
        :label-position="labelPosition"
        label-width="120px"
      >
        <el-form-item label="乡镇">
          <el-select
            v-model="inputship"
            value-key="Township"
            placeholder="请选择"
            @change="handleChange"
          >
            <el-option
              v-for="item in options"
              :key="item.Id"
              :value="item"
              :label="item.Township"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="村">
          <el-select
            v-model="inputvillage"
            value-key="Village"
            placeholder="请选择"
          >
            <el-option
              v-for="item in vill"
              :key="item.Id"
              :label="item.Village"
              :value="item"
              :blur="submitship"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="用地项目名称">
          <el-input v-model="inputlandname" placeholder="请输入用地项目名称" />
        </el-form-item>
        <el-form-item label="年度">
          <el-date-picker v-model="inputyears" type="year" placeholder="选择年">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="批次">
          <el-input v-model="inputbatch" placeholder="请输入批次" />
        </el-form-item>
        <el-form-item label="地块">
          <el-input v-model="inputmassif" placeholder="请输入地块" />
        </el-form-item>
        <el-form-item label="基准日期">
          <!-- <el-input v-model="inputapprovaldate" placeholder="请输入基准日期"></el-input> -->
          <el-date-picker
            v-model="inputapprovaldate"
            type="date"
            placeholder="请输入基准日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="计息日期">
          <el-date-picker
            v-model="inputinterestdate"
            type="date"
            placeholder="请输入计息日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="基准金额年度">
          <el-select
            v-model="inputyearwages"
            value-key="YearNum"
            placeholder="请选择"
            @change="changesV"
          >
            <el-option
              v-for="item in svg"
              :key="item.Id"
              :value="item"
              :label="item.YearNum"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="基准金额">
          <el-input v-model="inputwages" :disabled="true" />（元）
        </el-form-item>
        <el-form-item label="用地面积">
          <el-input
            v-model="inputmeasureland"
            placeholder="请输入用地面积"
            type="number"
          />（亩）
        </el-form-item>
        <el-form-item label="区片价">
          <el-input
            v-model="inputareaprice"
            placeholder="请输入区片价"
            type="number"
          />（元）
        </el-form-item>
        <el-form-item label="征缴比例">
          <el-input
            v-model="inputlevytaxes"
            placeholder="请输入征缴比例"
            type="number"
          />ㅤ%
        </el-form-item>
        <el-form-item label="社会保险费">
          <el-input
            type="number"
            v-model="inputsocialsecurity"
            placeholder="请输入社会保险费"
            :focus="mony()"
            :placeholder="this.ipt"
          />（元）
        </el-form-item>
        <el-form-item label="征地户数">
          <el-input
            v-model="inputhouseholds"
            placeholder="请输入征地户数"
            type="number"
          />（户）
        </el-form-item>
        <el-form-item label="征地人数">
          <el-input
            v-model="inputpeople"
            placeholder="请输入征地人数"
            maxlength="5"
            type="number"
          />（人）
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" style="width: 110px;" @click="handleClose()">确  定</el-button>
      </span>
    </el-dialog>
    <!-- 新增模态框 -->
    <el-dialog title="新增" :visible.sync="adddialogVisible" :before-close="clear" width="877px">
      <el-form
        :inline="true"
        :label-position="labelPosition"
        label-width="120px"
      >
        <el-form-item label="乡镇">
          <el-select
            v-model="addinputship"
            value-key="Township"
            placeholder="请选择"
            @change="handleChangeV"
          >
            <el-option
              v-for="item in options"
              :key="item.Id"
              :value="item"
              :label="item.Township"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="村">
          <el-select
            v-model="addinputvillage"
            value-key="Village"
            placeholder="请选择"
          >
            <el-option
              v-for="item in vill"
              :key="item.Id"
              :label="item.Village"
              :value="item"
              :blur="addsubmitship"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="用地项目名称">
          <el-input
            v-model="addinputlandname"
            placeholder="请输入用地项目名称"
          />
        </el-form-item>
        <el-form-item label="年度">
          <el-date-picker
            v-model="addinputyears"
            type="year"
            placeholder="选择年"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="批次">
          <el-input v-model="addinputbatch" placeholder="请输入批次" />
        </el-form-item>
        <el-form-item label="地块">
          <el-input v-model="addinputmassif" placeholder="请输入地块" />
        </el-form-item>
        <el-form-item label="基准日期">
          <!-- <el-input v-model="inputapprovaldate" placeholder="请输入基准日期"></el-input> -->
          <el-date-picker
            v-model="addinputapprovaldate"
            type="date"
            placeholder="请输入基准日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="计息日期">
          <el-date-picker
            v-model="addinputinterestdate"
            type="date"
            :placeholder="
              this.addTime != '' ? dayToString(this.addTime) : '请输入计息日期'
            "
            style="width: 100%"
            :focus="changeTime()"
          />
        </el-form-item>
        <el-form-item label="基准金额年度">
          <el-select
            v-model="addinputyearwages"
            value-key="YearNum"
            placeholder="请选择"
            @change="changeSvg"
          >
            <el-option
              v-for="item in svg"
              :key="item.Id"
              :value="item"
              :label="item.YearNum"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="基准金额">
          <el-input v-model="addinputwages" :disabled="true" />（元）
        </el-form-item>
        <el-form-item label="用地面积">
          <el-input
            v-model="addinputmeasureland"
            placeholder="请输入用地面积（亩）"
            type="number"
          />（亩）
        </el-form-item>
        <el-form-item label="区片价">
          <el-input
            v-model="addinputareaprice"
            placeholder="请输入区片价"
            type="number"
          />（元）
        </el-form-item>
        <el-form-item label="征缴比例">
          <el-input
            v-model="addinputlevytaxes"
            width="305px"
            placeholder="请输入征缴比例"
            type="number"
            :blur="changeinp()"
            min="1"
            max="100"
          />ㅤ%
        </el-form-item>
        <el-form-item label="社会保险费">
          <el-input
            value="123"
            v-model="addinputsocialsecurity"
            placeholder="请输入社会保险费"
            type="number"
            :focus="mony()"
            :placeholder="this.addipt"
          />（元）
        </el-form-item>
        <el-form-item label="征地户数">
          <el-input
            v-model="addinputhouseholds"
            placeholder="请输入征地户数"
            type="number"
          />（户）
        </el-form-item>
        <el-form-item label="征地人数">
          <el-input
            v-model="addinputpeople"
            placeholder="请输入征地人数"
            type="number"
            maxlength="5"
          />（人）
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clear">取 消</el-button>
        <el-button type="primary" style="width: 110px;" @click="handleCloseadd()">确  定</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.tableData.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 打印模板 -->
    <!-- <div ref="printTest" class="app" id="printTest">
      <table
        style="
          width: 100%;
          margin: 0;
          padding: 0;
          border-collapse: collapse;
          border-spacing: 0px;
          -webkit-border-horizontal-spacing: 0px;
          -webkit-border-vertical-spacing: 0px;
        "
        v-for="(item, index) in tableData"
        :key="index"
      >
        <thead>
          <tr style="margin: 0; padding: 0; border: none">
            <th
              style="width: 100%; text-align: center; font-size: 20px"
              colspan="12"
            >
              被征地项目统计表
            </th>
          </tr>
          <tr>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              所属乡（镇、园区）
            </th>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              {{ item.township }}
            </th>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              所属村
            </th>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              {{ item.Village }}
            </th>
          </tr>
          <tr>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              年度
            </th>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              {{ item.YearNum }}
            </th>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              批次
            </th>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              {{ item.BatchNum }}
            </th>
          </tr>
          <tr>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              批准用地日期
            </th>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              {{ formatDate(item.ApprovedDate) }}
            </th>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              批准用地面积
            </th>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              {{ item.ApprovedArea }}亩
            </th>
          </tr>
          <tr>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              征缴比例
            </th>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              {{ item.LevyScale * 100 }}%
            </th>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              区片价
            </th>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              {{ item.RegionPrice }}元
            </th>
          </tr>
          <tr>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              社会保险费
            </th>
            <th
              colspan="9"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              {{ item.Avgsocialwage }}元
            </th>
          </tr>
          <tr>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              被征地农民户数
            </th>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              {{ item.HouseholdCount }}户
            </th>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              被征地农民人数
            </th>
            <th
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                border: 1px solid #000;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              {{ item.FarmerCount }}人
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                text-align: left;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              制表人：
            </td>
            <td
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            ></td>
            <td
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                text-align: left;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              制表时间：
            </td>
            <td
              colspan="3"
              style="
                margin: 0;
                padding: 0 5px;
                text-align: center;
                width: 25%;
                height: 50px;
                line-height: 50px;
                font-weight: normal;
                box-sizing: border-box;
              "
            >
              {{ dateToString(new Date()) }}
            </td>
          </tr>
        </tbody>
      </table>
    </div> -->
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import print from "print-js";
import { getLodop } from "@/assets/utils/LodopFuncs";
import {
  API_GETV_LAND,
  API_INSERT,
  API_UPDATE,
  API_DELETE,
  API_AREA_VILLAGE,
  API_AREA_TOWNSHIP,
  API_AVG_GET,
} from "../../api/table";
import flatten from "../../utils/flatten";
import { Logger } from "runjs/lib/common";
export default {
  name: "",
  // afterEach(to, from, next) {
  //   if (from.name == "Login") {
  //     // window.reload();
  //     router.go(0);
  //     next(true);
  //     console.log(from);
  //   } else {
  //     next(true);
  //   }
  // },
  data() {
    return {
      /* 分页 */
      pagesize: 10, //每页的数据条数
      currentPage: 1,
      /* 打印信息 */
      printJS: {
        printable: "printTest", // 这里是要打印元素的ID
      },
      msg: "项目信息导入",
      labelPosition: "left",
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      dialogVisible: false, // 修改模块显示隐藏
      adddialogVisible: false, // 新增模块显示隐藏
      /* 修改每一项输入框 */
      inputship: "",
      shipId: "",
      inputvillage: "",
      villageId: "",
      inputlandname: "",
      inputyears: "",
      inputbatch: "",
      inputmassif: "",
      inputapprovaldate: "",
      inputinterestdate: "",
      inputyearwages: "",
      inputwages: "",
      inputmeasureland: "",
      inputareaprice: "",
      inputlevytaxes: "",
      inputsocialsecurity: "",
      inputhouseholds: "",
      inputpeople: "",
      mid: "",
      ipt: "", // 修改模态框 计算后的社会保险费
      /* 新增模态框 */
      addinputship: "",
      addinputvillage: "",
      addinputlandname: "",
      addinputyears: "",
      addinputbatch: "",
      addinputmassif: "",
      addinputapprovaldate: "",
      addinputinterestdate: "",
      addinputyearwages: "",
      addinputwages: "",
      addinputmeasureland: "",
      addinputareaprice: "",
      addinputlevytaxes: "",
      addinputsocialsecurity: "",
      addinputhouseholds: "",
      addinputpeople: "",
      addipt: "", // 新增模态框 计算后的社会保险费
      addTime: "",
      // 级联选择器
      options: [],
      vill: [],
      shipVid: "",
      // 阻止方法执行的条件
      // isClick: true,
      // 用户
      userName: "",
      // 基准金额年度列表
      svg: [],
      changeTimeOver: true,
      isRouterAlive: true,
    };
  },
  methods: {
    clear(){
      this.vill = [];
      this.addinputvillage = "";
      this.addinputship = "";
      // this.addinputvillage= "";
      this.addinputlandname= "";
      this.addinputyears= "";
      this.addinputbatch= "";
      this.addinputmassif= "";
      this.addinputapprovaldate= "";
      this.addinputinterestdate= "";
      this.addinputyearwages= "";
      this.addinputwages= "";
      this.addinputmeasureland= "";
      this.addinputareaprice= "";
      this.addinputlevytaxes= "";
      this.addinputsocialsecurity= "";
      this.addinputhouseholds= "";
      this.addinputpeople= "";
      this.addipt= ""; // 新增模态框 计算后的社会保险费
      this.addTime= "";
      this.adddialogVisible = false;
    },
    changPage() {
      let changId = localStorage.getItem("chang");
      if (changId == 1) {
        localStorage.setItem("chang", 2);
        console.log("作用");
        console.log(changId);
        changId += 1;
        // window.reload();
        setTimeout(location.reload());
      } else {
        console.log("已刷新");
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    /* 表单分页 */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    /* 是否修改 */
    handleClose() {
      // console.log(this.inputyears);
      if (this.inputyears.length != 4) {
        this.inputyears = this.inputyears.substr(0,4);
        // console.log(this.inputyears);
      }
      this.$confirm("确认修改？")
        .then((_) => {
          // console.log(this.inputyears);
          let data = {
            Id: this.mid, //项目编号,更新主要索引
            VillageId: this.inputvillage.Id, //村编号
            ProjectName: this.inputlandname, //项目名称
            YearNum: this.inputyears, //年度
            BatchNum: this.inputbatch, //批次
            BlockNum: this.inputmassif, //地块
            ApprovedDate: this.inputapprovaldate, //基准日期
            InterestDate: this.inputinterestdate, //计息日
            ApprovedArea: this.inputmeasureland, //征地面积
            RegionPrice: this.inputareaprice, //区片价
            LevyScale: this.inputlevytaxes / 100, //税率
            SecurityAmount:
              this.inputsocialsecurity == ""
                ? this.ipt
                : this.inputsocialsecurity, //社会保险费
            HouseholdCount: this.inputhouseholds, //户数
            FarmerCount: this.inputpeople, //人数
            Avgsocialwageyear: this.inputyearwages, //基准金额年度
            Avgsocialwage: this.inputwages, //基准金额
          };
          console.log(data);
          if (!data.VillageId) {
            data.VillageId = this.villageId;
          }
          API_UPDATE(data)
            .then((res) => {
              this.dialogVisible = false;
              this.queryList();
              this.vill = [];
            })
            .catch((err) => {
              this.dialogVisible = false;
              this.vill = [];
            });
          // done();
        })
        .catch((_) => {
          console.log(2);
        });
    },
    /* 是否添加 */
    handleCloseadd() {
      this.submitship();
      this.$confirm("确认增加？")
        .then((_) => {
          let data = {
            Id: 0, //项目编号,插入为0
            VillageId: this.addinputvillage.Id, //村编号
            ProjectName: this.addinputlandname, //项目名称
            YearNum: this.dayToString(this.addinputyears).substring(0, 4), //年度
            BatchNum: this.addinputbatch, //批次
            BlockNum: this.addinputmassif, //地块
            ApprovedDate: this.addinputapprovaldate, //基准日期
            InterestDate:
              this.addinputinterestdate != ""
                ? this.addinputinterestdate
                : this.addTime, //计息日
            ApprovedArea: this.addinputmeasureland, //征地面积
            RegionPrice: this.addinputareaprice, //区片价
            LevyScale: this.addinputlevytaxes / 100, //税率
            SecurityAmount:
              this.addinputsocialsecurity == ""
                ? this.addipt
                : this.addinputsocialsecurity, //社会保险费
            HouseholdCount: this.addinputhouseholds, //户数
            FarmerCount: this.addinputpeople, //人数
            Avgsocialwageyear: this.addinputyearwages, //基准金额年度
            Avgsocialwage: this.addinputwages, //基准金额
          };
          API_INSERT(data)
            .then((res) => {
              this.queryList();
              this.adddialogVisible = false;
              this.addinputvillage = ""; //村编号
              this.addinputlandname = ""; //项目名称
              this.addinputyears = ""; //年度
              this.addinputbatch = ""; //批次
              this.addinputmassif = ""; //地块
              this.addinputapprovaldate = ""; //基准日期
              this.addinputinterestdate = ""; //计息日
              this.addinputmeasureland = ""; //征地面积
              this.addinputareaprice = ""; //区片价
              this.addinputlevytaxes = ""; //税率
              this.addinputsocialsecurity = ""; //社会保险费
              this.addinputhouseholds = ""; //户数
              this.addinputpeople = ""; //人数
              this.addinputyearwages = ""; //基准金额年度
              this.addinputwages = ""; //基准金额
              this.vill = [];
              this.clear();
            })
            .catch((err) => {
              console.log(err);
              this.adddialogVisible = false;
              this.addinputvillage = ""; //村编号
              this.addinputlandname = ""; //项目名称
              this.addinputyears = ""; //年度
              this.addinputbatch = ""; //批次
              this.addinputmassif = ""; //地块
              this.addinputapprovaldate = ""; //基准日期
              this.addinputinterestdate = ""; //计息日
              this.addinputmeasureland = ""; //征地面积
              this.addinputareaprice = ""; //区片价
              this.addinputlevytaxes = ""; //税率
              this.addinputsocialsecurity = ""; //社会保险费
              this.addinputhouseholds = ""; //户数
              this.addinputpeople = ""; //人数
              this.addinputyearwages = ""; //基准金额年度
              this.addinputwages = ""; //基准金额
              this.vill = [];
              this.clear()
            });
        })
        .catch((_) => {
          // this.adddialogVisible = false;
        });
    },
    /* 导出文档 */
    exportClick() {
      this.export2Excel();
    },
    export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../vendor/Export2Excel");

        const tHeader = [
          "编号",
          "村",
          "用地项目名称",
          "年度",
          "批次",
          "地块",
          "基准日期",
          "计息日期",
          "基准金额年度",
          "基准金额",
          "用地面积",
          "区片价",
          "征缴比例",
          "社会保险费",
          "征地户数",
          "征地人数",
        ];

        const filterVal = [
          "number",
          "village",
          "landname",
          "years",
          "batch",
          "massif",
          "approvaldate",
          "interestdate",
          "yearwages",
          "wages",
          "measureland",
          "areaprice",
          "levytaxes",
          "socialsecurity",
          "households",
          "people",
        ];

        const list = [];

        const data = this.formatJson(filterVal, list);

        export_json_to_excel(
          tHeader,
          data,
          "**人员信息" + this.dayToString(new Date())
        );
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    printText() {
      this.$router.push("/projectinfo/print");
    },
    /* 时间格式化 */
    dateToString(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    /* 时间戳格式化 */
    formatDateV(time) {
      time = time.replace(/[^0-9]/gi, "");
      // console.log(time.toString())
      return new Date(parseInt(time));
    },
    formatDate(time) {
      if (time != "") {
        let aaa = parseInt(time.toString().substr(6, 13));
        if (aaa > 0) {
          return new Date(aaa).toLocaleDateString();
        } else {
          return "--";
        }
      }
    },
    /* 时间格式化 */
    dayToString(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
    //打印
    printSomething() {
      // 此处的style即为打印时的样式
      // print({
      //   printable: "printTest",
      //   type: "html",
      //   scanStyles: false,
      //   // header: "被征地项目信息统计表",
      //   documentTitle: "被征地项目信息统计表",
      //   headerStyle: "font-size:25px; text-align:center;",
      //   repeatTableHeader: false,
      // });
      var LODOP; //声明为全局变量
      this.PrintMytable();
    },
    PrintMytable() {
      LODOP = getLodop();
      LODOP.PRINT_INIT("项目信息管理表格");
      let printDome,
        ary = [];
      // for (var i = 0; i < this.tableData.length; i++) {
      for (var i = 0; i < this.tableData.length; i++) {
        printDome = `<div ref="printTest" style="height: 910px;" class="app" id="printTest">
            <table
              style="
                width: 100%;
                margin: 0;
                padding: 0;
                border-collapse: collapse;
                border-spacing: 0px;
                -webkit-border-horizontal-spacing: 0px;
                -webkit-border-vertical-spacing: 0px;">
              <thead>
                <tr style="margin: 0; padding: 0; border: none">
                  <th
                    style="width: 100%; text-align: center; font-size: 20px"
                    colspan="12"
                  >
                    被征地项目统计表
                  </th>
                </tr>
                <tr>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    所属乡（镇、园区）
                  </th>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    ${this.tableData[i].township}
                  </th>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    所属村
                  </th>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    ${this.tableData[i].Village}
                  </th>
                </tr>
                <tr>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    年度
                  </th>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    ${this.tableData[i].YearNum}
                  </th>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    批次
                  </th>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    ${this.tableData[i].BatchNum}
                  </th>
                </tr>
                <tr>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    批准用地日期
                  </th>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    ${this.formatDate(this.tableData[i].ApprovedDate)}
                  </th>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    批准用地面积
                  </th>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    ${this.tableData[i].ApprovedArea}亩
                  </th>
                </tr>
                <tr>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    征缴比例
                  </th>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    ${this.number_format(this.tableData[i].LevyScale * 100,2)}%
                  </th>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    区片价
                  </th>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    ${this.tableData[i].RegionPrice}元
                  </th>
                </tr>
                <tr>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    社会保险费
                  </th>
                  <th
                    colspan="9"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    ${this.tableData[i].Avgsocialwage}元
                  </th>
                </tr>
                <tr>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    被征地农民户数
                  </th>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    ${this.tableData[i].HouseholdCount}户
                  </th>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    被征地农民人数
                  </th>
                  <th
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      border: 1px solid #000;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    ${this.tableData[i].FarmerCount}人
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      text-align: left;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    制表人：
                  </td>
                  <td
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >${this.userName}</td>
                  <td
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      text-align: left;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    制表时间：
                  </td>
                  <td
                    colspan="3"
                    style="
                      margin: 0;
                      padding: 0 5px;
                      text-align: center;
                      width: 25%;
                      height: 50px;
                      line-height: 50px;
                      font-weight: normal;
                      box-sizing: border-box;
                    "
                  >
                    ${this.dateToString(new Date())}
                  </td>
                </tr>
              </tbody>
            </table>
        </div>`;

        ary.push(printDome);
      }
      LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "title");
      LODOP.SET_PRINT_STYLE("FONTSIZE", 15);
      LODOP.SET_PRINT_STYLE("BOLD", 1);
      LODOP.ADD_PRINT_HTML(50, 50, "85%", "85%", ary);
      LODOP.SET_PREVIEW_WINDOW(1, 0, 0, 800, 600);

      LODOP.PREVIEW();
      // 显示打印设计界面，设计完毕关闭窗口后，返回生成的程序代码
      LODOP.PRINT_DESIGN();
      // 设置打印维护窗口关闭后是否返回程序代码
      LODOP.SET_PRINT_MODE("PRINT_SETUP_PROGRAM", true);
    },
    /* 查询 */
    queryList() {
      // let aaaa= this.route.route
      // console.log(aaaa);
      API_GETV_LAND()
        .then((response) => {
          this.tableData = response.ResList;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /* 修改 */
    modify(row) {
      this.submitship();
      this.submitvill();
      this.dialogVisible = true;
      /*  */
      this.mid = row.Id;
      this.inputship = row.township;
      this.inputvillage = row.Village;
      this.inputlandname = row.ProjectName;
      this.inputyears = row.YearNum;
      this.inputbatch = row.BatchNum;
      this.inputmassif = row.BlockNum;
      this.inputapprovaldate = this.formatDateV(row.ApprovedDate);
      this.inputinterestdate = this.formatDateV(row.InterestDate);
      this.inputyearwages = row.Avgsocialwageyear;
      this.inputwages = row.Avgsocialwage;
      this.inputmeasureland = row.ApprovedArea;
      this.inputareaprice = row.RegionPrice;
      this.inputlevytaxes = this.number_format(row.LevyScale * 100,2);
      this.inputsocialsecurity = row.SecurityAmount;
      this.inputhouseholds = row.HouseholdCount;
      this.inputpeople = row.FarmerCount;
      this.villageId = row.VillageId;
      this.shipId = row.townshipId;
    },
    /* 选中删除的项 */
    del() {
      this.$confirm("确认删除？")
        .then((_) => {
          let data = this.multipleSelection.map((item) => {
            return {
              Id: item.Id,
            };
          });
          if (data.length != 0) {
            API_DELETE(data)
              .then((res) => {
                console.log(res);
                this.queryList();
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            this.$message.warning("未识别到数据！");
          }
        })
        .catch((_) => {
          console.log("aaa");
        });
    },
    // 获取乡镇数据列表
    submitvill() {
      API_AREA_TOWNSHIP()
        .then((res) => {
          this.options = res.ResList;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取村数据列表
    submitship() {
      this.vill = [];
      API_AREA_VILLAGE()
        .then((res) => {
          res.ResList.map((item, index) => {
            if (!this.inputship.Id) {
              if (item.TownshipId == this.shipId) {
                this.vill.push(item);
              }
            } else {
              if (item.TownshipId == this.inputship.Id) {
                this.vill.push(item);
              }
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 添加列表获取村数据
    addsubmitship() {
      this.vill = [];
      API_AREA_VILLAGE()
        .then((res) => {
          res.ResList.map((item, index) => {
            if (item.TownshipId == this.addinputship.Id) {
              this.vill.push(item);
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /* 处理数据--级联选择器 */
    areaList() {},
    handleChange(e) {
      this.submitship();
      this.inputvillage = "";
    },
    handleChangeV(e) {
      this.addsubmitship();
      this.addinputvillage = "";
    },
    // 控制社会保险金额自动渲染
    mony() {
      this.addipt =
        this.number_format((Number(this.addinputlevytaxes) *
          Number(this.addinputareaprice) *
          Number(this.addinputmeasureland)) /
        100,2);
      this.inputsocialsecurity = "";
      this.ipt =
        this.number_format((Number(this.inputlevytaxes) *
          Number(this.inputareaprice) *
          Number(this.inputmeasureland)) /
        100,2);
      // console.log(this.addinputsocialsecurity);
      // this.isClick = false;
    },
    changeTime() {
      this.addTime = this.addinputapprovaldate;
    },
    changeinp() {
      if (this.addinputlevytaxes >= 100) {
        this.addinputlevytaxes = 100;
      }
    },
    submitsvg() {
      API_AVG_GET()
        .then((res) => {
          console.log(res);
          let ary = res.ResList;
          ary.sort(this.compare);
          console.log(ary);
          this.svg = ary;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    compare(a, b) {
      return Number(a.YearNum) - Number(b.YearNum);
    },
    changeSvg() {
      console.log(this.addinputwages);
      this.addinputwages = this.addinputyearwages.AvgSocialWage;
      this.addinputyearwages = this.addinputyearwages.YearNum;
    },
    changesV() {
      console.log(this.inputwages);
      this.inputwages = this.inputyearwages.AvgSocialWage;
      this.inputyearwages = this.inputyearwages.YearNum;
    },
    number_format(number, decimals, dec_point, thousands_sep) {
      /*
       * 参数说明：
       * number：要格式化的数字
       * decimals：保留几位小数
       * dec_point：小数点符号
       * thousands_sep：千分位符号
       *
       */
      number = (number + "").replace(/[^0-9+-Ee.]/g, "");
      var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
        dec = typeof dec_point === "undefined" ? "." : dec_point,
        s = "",
        toFixedFix = function (n, prec) {
          var k = Math.pow(10, prec);
          return "" + parseInt(n * k) / k;
        };
      s = (prec ? toFixedFix(n, prec) : "" + parseInt(n)).split(".");
      var re = /(-?\d+)(\d{3})/;
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2");
      }
      if ((s[1] || "").length < prec) {
        s[1] = s[1] || "";
        s[1] += new Array(prec - s[1].length + 1).join("0");
      }
      return s.join(dec);
    },
  },
  created() {
    this.queryList();
    this.submitvill();
    this.userName = localStorage.getItem("user");
    this.submitsvg();
    // this.changPage();
  },
};
</script>

<style scoped lang="scss">
.projectinfo {
  box-sizing: border-box;
  padding: 30px;
  .el-row {
    // text-align: right;
  }
  .el-pagination {
    margin-top: 10px;
    text-align: right;
  }
  /* 打印的东西隐藏起来 */
  @media only screen {
    #printTest {
      display: none;
    }
  }
  ::v-deep .el-dialog {
    .el-dialog__body{
      padding-top: 20px;
    }
    .el-form-item {
      width: 445px;
    }
    .el-input__inner {
      width: 185px !important;
    }
    .el-form-item__content{
      margin-left: 0px;
    }
    .el-input {
      width: 185px;
    }
    .el-form-item__label{
      text-align: left;
    }
    .el-button{
      // width: 110px;
    }
  .el-form .el-form-item:nth-of-type(odd){ margin-left: 40px; margin-right: 0px;width: 412px;}
  .el-form .el-form-item:nth-of-type(even){ margin-right: 0px; width: 381px;}
  }
  ::v-deep .el-table {
    margin-top: 20px;
    .cell {
      // height: 24px !important;
      // padding: 0 !important;
      line-height: 22px;
    }
    // .el-table__row{
    //   height: 48px;
    // }
    td {
      padding: 8px 0;
    }
  }
}
</style>